<template>
  <div id="List" style="background-color: cadetblue;margin:0;width: 210px">
    <div class="textarea">
      <textarea id="text" :disabled="disabled" :placeholder="placeholder" style="resize: none">{{text}}</textarea>
    </div>
    <div class="controller">
      <input type="button" :value="deletevalue" @click="deleteBlock">
      <input type="button" :value="value" @click="isDisabled">
    </div>
  </div>
</template>

<script>
import InputTextArea from "./InputTextArea";
export default {
  name: "ListTextArea",
  components: {
    InputTextArea,
  },
  data() {
    return {
      text:'',
      deletevalue:'删除',
      value:'编辑',
      placeholder: '请输入',
      disabled:true
    }
  },
  methods:{
    deleteBlock(){
      if(this.deletevalue==='删除')this.$parent.deleteItem()
      else{
        this.text=''
        document.getElementById("text").value=this.text
        this.isDisabled()
      }
    },
    isDisabled(){
      this.disabled=!this.disabled
      if(this.value==='编辑'){
        this.value='完成'
        this.deletevalue='取消'
      }
      else{
        this.value='编辑'
        this.deletevalue='删除'
      }
    }
  }
}
</script>
<style scoped>
#List{
  width: 100%;
  height: 200px;
}
.controller{
  float: right;
  margin-right:10px
}
.textarea{
  height: 80%;
  width: 90%;
  margin: auto;
  display: flex;
}
textarea{
  margin-top: 5%;
  height: 90%;
  width: 100%;
}
</style>